<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<script src="vue.js"></script><script src="jquery-1.11.3.js"></script>
  

<p>
  <label for="textfield">用户名:</label>
  <input type="text" name="textfield" id="textfield">
  <label for="textfield2">备注:</label>
  <input type="text" name="textfield2" id="textfield2">
  <input type="button" name="button" id="button" value="搜索">
</p>
<table width="100%" border="0" id="table1">
  <tbody>
    <tr bgcolor="#CBC6C6">
      <td>用户id</td>
      <td>用户名</td>
      <td>备注</td>
      <td>操作</td>
    </tr>
    <tr v-for="dataItem in list_data1">
      <td>{{dataItem.user_id}}</td>
      <td><span class="hide">{{dataItem.用户名}}</span></td>
      <td><span class="hide">{{dataItem.备注}}</span></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

<script>
 
 
		  
//建立vue与表格的绑定关系，同时设置初始值为空[]
//el就是表格id
//list_data1是自定义的数据列表
var   VueObj1 =  new Vue({
          el: '#table1',
      	  data: {
            list_data1: []
          }
   });
   
   //获取数据，一般是从ajax从后端获取数据
 //  var  list_data2=[{用户名:"王一",备注:"管理员"},{用户名:"王二",备注:"普通用户"}];
  	//将数据绑定到table控件 
  //  VueObj1.$data.list_data1=list_data2;
	
	
   window.setTimeout(function()
   {
	 
	 
	 console.log("log...");
	 
	 
	   },2000);
	var url="http://localhost:8080/AjaxJsbridge_HttpparamMode_servlet?m=com.attilax.db.DbServiceV4qb9.executeQuery&p1=select+*+from+ecs_users+limit+10&iocFac=com.attilax.ioc.Ioc4other";
	url="http://www.weather.com.cn/data/cityinfo/101250101.html";
	url="http://laundry.vshoutao.com:8090/m_clothes/clothesList.do";
	// mode: "no-cors",
	/*\
	\headers: {
						'Accept': 'application/json',
						'Content-Type': 'application/json'
					},
	*/
	var fetchOption={  
						method:"POST",
					
					body: JSON.stringify({						 
						pageIndex:0
					  })
	
	};
	
	////convert to json object
	fetch(url,fetchOption).then(response =>		response.json())
  .then(data => {
	console.log("---line1:");
	console.log("---data:"+data);
	console.log("---line2:");
	}
  )
  .catch(e => console.log("Oops, error", e));
  
  
  /*
	fetch(url,fetchOption).then(	function(response) {
			 
				console.log("------ret txt:"+response.json());
	})
  .then(function(data) {
			console.log(data);
})
  .catch(function(e) {
		console.log("Oops, error");
})
	*/
	/*
	$.get(url,function(data,status){
     console.log("Data: " + data + "\nStatus: " + status);
	  var    list_data2 = eval("(" + data + ")");  
	  
	  console.log("--tag2");
	  VueObj1.$data.list_data1=list_data2;
  });
  */

</script>
</body>
</html>
